<script setup>
import axios from 'axios'
import dayjs from 'dayjs'
import {getCurrentInstance, ref} from 'vue'
import HotPane from '~/contentScripts/views/tao/list/components/TbHotPane.vue'
import { isLogin } from '~/logic'

const emit = defineEmits(['login'])
const tabs = ref([])
const visible = ref(false)
const date = ref(dayjs())
const loaded = ref(false)
const instance = getCurrentInstance()
const __option = instance?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit,
  }, __option))
    visible.value = true
}
const loadData = () => {
  if (loaded.value)
    return

  loaded.value = true
  axios.get('/Hot/tabs', {
    params: {
      date: date.value.format('YYYY-MM-DD'),
    },
  }).then((res) => {
    if (res.data.data.length === 0) {
      loaded.value = false
      message.error('无该日期热榜数据~')
      // date.value = dayjs()
      // return
    }
    tabs.value = res.data.data
  })
}
// 监听日期变化
watch(() => date.value, () => {
  loaded.value = false
  loadData()
}, { deep: true })
loadData()
</script>

<template>
  <div style="display: inline-block" @click="handle">
    <slot>
      <a-button type="primary" size="small" style="margin-left: 10px;">
        手淘热搜
      </a-button>
    </slot>
  </div>
  <a-modal v-model:visible="visible" :width="1200" title="星察数据-手淘热搜" :footer="null">
    <!--    {{ tabs }} -->
    <a-tabs style="margin-top: -10px;">
      <a-tab-pane v-for="(item) in tabs" :key="item.tab_id" :tab="`${item.tab_title}`">
        <HotPane :tab-id="item.tab_id" :date="date.format('YYYY-MM-DD')" />
      </a-tab-pane>
      <template #rightExtra>
        <div style="display: inline-block;font-size: 14px;">
          统计时间:
        </div>
        <a-date-picker
          v-model:value="date" size="small" format="YYYY-MM-DD" style="margin-left: 10px;"
          @change="loadData"
        />
      </template>
    </a-tabs>
  </a-modal>
</template>

<style>
.ant-modal-body {
  padding: 10px;
}
</style>
